/* eslint-disable no-console */
/* eslint-disable react/react-in-jsx-scope */
// 费用减免订单
import React, {useState} from 'react'
import {
	Form,
	Row,
	Col,
	Input,
	Space,
	Button,
	InputNumber,
	Upload,
	message,
} from 'antd'
import {UploadOutlined} from '@ant-design/icons'
import {useModel, history} from 'umi'
import SelectOrder from '../common/selectOrder'
import cardStyles from '../index.less'
import {uploadFileUrl} from '@/service/common/upload'
import {feeReduction} from '@/service/order'

const {TextArea} = Input

const formLayout = {
	labelCol: {
		xs: {span: 24},
		sm: {span: 4},
	},
	wrapperCol: {
		xs: {span: 24, offset: 0},
		sm: {span: 12, offset: 0},
	},
}
function DerateOrder() {
	const {initialState} = useModel('@@initialState')
	const {fileName} = initialState || {}
	const [openModal, setOpenModal] = useState(false)
	const [fileList, setFileList] = useState<any>([])
	const [orderId, setOrderId] = useState()
	const [form] = Form.useForm()
	const [loading, setLoading] = useState(false)
	//  文件上传生成上传信息
	const uploadConfig = {
		action: uploadFileUrl,
		name: fileName, // 滴滴上传:file 测试上传:files
		data: {
			modelName: 'carOrder',
			targetAttr: 2,
		},
		beforeUpload: (file: any) => {
			const isLt200M = file.size / 1024 / 1024 < 200
			if (!isLt200M) {
				message.error('文件必须小于200MB')
			}
			return isLt200M
		},
		onChange(info: any) {
			if (info.file.status === 'done') {
				setFileList(info?.fileList)
				const list: any = []
				info?.fileList?.map((res: any) =>
					list.push(res?.response?.data?.id?.toString()),
				)
				form.setFieldsValue({attachmentList: list})
			}
			setFileList(info?.fileList)
		},
		onRemove(info: any) {
			form.setFieldValue('attachmentList', '')
			message.success(`${info?.name}移除成功`)
		},
		fileList,
	}
	// 提交
	const onFinish = (value: any) => {
		setLoading(true)
		// const list = []
		// list.push(value?.orderCarIds)
		const obj: any = {
			orderCarIds: orderId,
			amount: value?.amount,
			remark: value?.remark,
			attachmentList: value?.attachmentList,
		}
		feeReduction(obj).then((res: any) => {
			if (res?.success) {
				setLoading(false)
				message.success(res?.msg)
				history.goBack()
			}
		})
	}
	// 取消
	const onReset = () => {
		form.resetFields()
		history.goBack()
	}
	// 选中减免订单
	const selectOrder = (value: any) => {
		const ids: any = []
		const ids1: any = []
		value?.forEach((res: any) => {
			ids.push(res?.orderCarNo)
			ids1.push(res?.id)
		})
		setOrderId(ids1)
		form.setFieldValue('orderCarIds', ids?.toString())
		form.setFieldValue('username', ids?.toString())
		// setOrderId(ids)
	}
	return (
		<div className={cardStyles.page}>
			<div className={cardStyles.card}>
				<p className={cardStyles.title}>费用减免信息</p>
				<div>
					<Form
						name="basic"
						onFinish={onFinish}
						onFinishFailed={() => {}}
						autoComplete="off"
						{...formLayout}
						wrapperCol={{flex: 1}}
						form={form}>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item
									name="username"
									label="选择减免订单"
									rules={[
										{
											required: true,
											message: '请选择减免订单',
										},
									]}>
									<Button onClick={() => setOpenModal(true)}>
										请选择减免订单
									</Button>
									{/* <Input
                    placeholder="请选择减免订单"
                    style={{ width: '300px' }}
                    disabled={true}
                    onClick={() => setOpenModal(true)}
                  /> */}
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item
									name="orderCarIds"
									label="已选择订单号">
									<TextArea disabled />
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item
									name="amount"
									label="减免金额/元"
									rules={[
										{
											required: true,
											message: '请输入减免金额',
										},
									]}>
									<InputNumber
										type="number"
										placeholder="请输入减免金额"
										style={{width: '190px'}}
									/>
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item name="remark" label="减免原因">
									<Input
										maxLength={200}
										placeholder="请输入减免原因，不超过200个字符"
										allowClear
										style={{width: '600px'}}
									/>
								</Form.Item>
							</Col>
						</Row>
						<Row gutter={24} className={cardStyles.rows}>
							<Col span={24}>
								<Form.Item
									label="上传附件"
									name="attachmentList">
									<Upload {...uploadConfig}>
										<Button icon={<UploadOutlined />}>
											添加附件
										</Button>
									</Upload>
									<p style={{margin: '15px 0 0 0'}}>
										附件说明：附件最大支持30M，
									</p>
									<p>支持格式：PDF、Word、Excel、JPG、PNG</p>
								</Form.Item>
							</Col>
						</Row>
						<Row justify="center" style={{marginTop: '20px'}}>
							<Form.Item>
								<Space>
									<Button
										shape="round"
										onClick={() => {
											onReset()
										}}>
										取消
									</Button>
									<Button
										shape="round"
										type="primary"
										htmlType="submit"
										loading={loading}>
										提交
									</Button>
								</Space>
							</Form.Item>
						</Row>
					</Form>
				</div>
				<SelectOrder
					title="选择减免订单"
					setIsOpen={setOpenModal}
					isOpen={openModal}
					selectOrder={selectOrder}
				/>
			</div>
		</div>
	)
}
export default DerateOrder
